<!-- 每一项编辑文本的组件 -->
<template>
  <NodeViewWrapper class="vue-component">
    <div contenteditable="false" class="editor_content_ele_point" @click="listen"
      @mouseenter.stop="state.isHover = true" @mouseleave.stop="state.isHover = false">
      <!-- 此项有音频, 并且仓库中的音频和此项的音频相同 -->
      <template v-if="
        !!editItem?.audio_url &&
        VideoPlayingData?.audio_url ==
        editItem?.audio_url
      ">
        <!-- 播放或暂停状态 -->
        <PauseOutlined v-if="VideoPlayingData.isPlay" style="color: #0c0d0e" />
        <CaretRightOutlined v-else style="color: #0c0d0e" />
      </template>
      <!-- 此项没有音频 或者 正在播放的音频与此项不同 -->
      <template v-else>
        <!-- 点击了此项, 进入了加载状态 -->
        <template v-if="listenLoding">
          <LoadingOutlined> </LoadingOutlined>
        </template>
        <template v-else>
          <span data-slate-zero-width="true" contenteditable="false">
            <cu-icon type="icon-dian" v-show="!state.isHover" contenteditable="false"></cu-icon>
            <cu-icon type="icon-yinliang01" style="color: #1664ff" v-show="state.isHover"
              contenteditable="false"></cu-icon>
          </span>
        </template>
        <!-- <template></template> -->
        <!-- 充值弹窗 -->
        <vipModal ref="vipModalRef" :visible="vipVisible" @close="vipVisible = false"></vipModal>
        <!-- hover -->
      </template>
    </div>
    <NodeViewContent class="content" />

  </NodeViewWrapper>

</template>

<script setup>
// 全局轻提示
import { message } from "ant-design-vue";
import request from "@/common/utils/request";
import utils from "@/common/utils/utils";
import { nanoid } from "nanoid";

import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
import { computed, ref, onMounted, watch, reactive } from 'vue'
import {
  LoadingOutlined,
  PauseOutlined,
  CaretRightOutlined
} from "@ant-design/icons-vue";

import { useStore } from "vuex";

import { getSsmlcontent, getAudioData_Set } from '@/views/shotstack/MixedCutPlatforms/utools/index.js'
import { nextTick } from "vue";

// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref(null)
const store = useStore();

// 仓库中的字幕数据
const subTitle = computed(() => {
  return store.state.videoMixCut.Subtitles;
});

const props = defineProps({
  node: Object,
  editor: Object
})

// watch(() => props, (nv, ov) => {
//   console.log(nv, 'propspropspropspropspropspropspropspropspropspropspropsprops');
// }, {
//   deep: true
// })


const vipVisible = ref(false)
// 扣点参数
const countData = ref(null)

const state = reactive({
  isHover: false
})

// 本项subtitle的id
const subId = computed(() => {
  // 如果遇到中间回车, 导致subId重复, 修改此项的subId
  const tts_index = subTitle.value[currentDrawerIndex.value.index].tts_config.findIndex(ele => ele.tts_id == tts_id.value)
  if (tts_index != -1) {
    const id = nanoid()
    const filterArr = subTitle.value[currentDrawerIndex.value.index].tts_config[tts_index].subtitle.filter(ele => ele.subtitle_id == subId.value)
    if (filterArr.length > 1) {
      props.updateAttributes({ subId: id })
    }
  }
  return props.node.attrs.subId
})

// 抽屉中编辑的字幕组的id
const tts_id = computed(() => {
  return store.state.videoMixCut.current_tts_id
})

// 当前编辑的项的下标
const currentDrawerIndex = computed({
  get() {
    return store.state.videoMixCut.currentIndex;
  }
});

// // 找到的本项数据
const editItem = computed(() => {
  const tts_index = subTitle.value[currentDrawerIndex.value.index].tts_config.findIndex(ele => ele.tts_id == tts_id.value)
  if (tts_index == -1) return null
  return subTitle.value[currentDrawerIndex.value.index].tts_config[tts_index].subtitle.find(ele => ele.subtitle_id == subId.value)
  // return subTitle.value[currentDrawerIndex.value.index].tts_config[0].subtitle.find(ele => ele.subtitle_id == props.node.attrs.subId)
})

// 当前编辑的tts项
const target_tts = computed(() => {
  return subTitle.value[currentDrawerIndex.value.index].tts_config.find(ele => ele.tts_id == tts_id.value)
})

// 仓库中的音频播放数据
const VideoPlayingData = computed(() => {
  return store.state.videoMixCut.VideoPlayingData
})

const isPlay = ref(false) // true => 播放中  false => 暂停中
const listenLoding = ref(false) // true => 加载中  false => 加载完成

// 点击项
const listen = async () => {
  // 获得此项的 用于试听的ssml结构
  const ssmlData = getSsmlcontent(props.node.content.content)
  // debugger
  // return
  if (ssmlData.isEmpty || ssmlData.text == '') return message.warning("当前预览单句中存在空行或不可配音的单行文本!");
  if (listenLoding.value) return

  // 当前项的url没有清空 => 并且正在播放 => 暂停 else => 播放
  // 如果当前有音频链接
  if (editItem.value.audio_url != '') {
    // 当前播放的和本项的音频相同
    if (VideoPlayingData.value.audio_url == editItem.value.audio_url) {
      // 判断音频的播放状态
      if (VideoPlayingData.value.isPlay) {
        // 暂停
        store.commit("videoMixCut/SETVIDEOPLAYING_DATA", {
          isPlay: false,
          audio_url: editItem.value.audio_url,
          reset: false, // 是否从头播放
          changeUrl: false, // 是否修改url
        })
        // isPlay.value = false
      } else {
        // 播放
        store.commit("videoMixCut/SETVIDEOPLAYING_DATA", {
          isPlay: true,
          audio_url: editItem.value.audio_url,
          reset: false, // 是否从头播放
          changeUrl: false, // 是否修改url
        })
        // isPlay.value = true
      }
    } else {
      // 直接播放
      store.commit("videoMixCut/SETVIDEOPLAYING_DATA", {
        isPlay: true,
        audio_url: editItem.value.audio_url,
        reset: true, // 是否从头播放
        changeUrl: true, // 是否修改url
      })
      // isPlay.value = true
    }
  } else {

    const data = {
      ssmlData, editItem, target_tts, listenLoding, subTitle, isPlay, mexid_all: false
    }

    // ssmlData.text

    console.log(data, '小圆点获取音频需要的参数');
    try {
    const res =  await utils.textConfigGet({
        number: data.ssmlData.text.length
    })
      // 查询积分, 积分不足则走不到这一步

      // 获取积分消耗提示内容
      // const content = utils.useText(res)
      try {
        // 确认消耗
        // await utils.kd({ content,res })
        getAudioData_Set({
          ssmlData, editItem, target_tts, listenLoding, subTitle, isPlay, mexid_all: false
        })
        
      } catch (error) {
        
      }
    } catch (error) {
      vipVisible.value = true
      vipModalRef.value && vipModalRef.value.openBuyVisible()
    }
  }
};

// // 积分消耗查询
// const configGet =  (data) => {
//   return new Promise(async (resolve, reject) => {
//     const res = await request.get('/work_ai', "/user/shotstack/text_to_speech/config/get", {
//       number: data.ssmlData.text.length
//     } );
//     console.log(res, '语音消耗的积分');
//     if (res?.usable != 1) {
//       vipVisible.value = true
//       reject(false)
//     }
//     countData.value = res
//     resolve(res)
//   })
// }

</script>

<style lang="less" scoped>
.vue-component {
  position: relative;
  padding: 5px 20px;

  .content {
    margin: 5px 0;
  }

  .editor_content_ele_point {
    cursor: pointer;
    color: #c7ccd6;
    position: absolute;
    left: 2px;
    top: 20px;
    transform: translateY(-50%);
  }

}
</style>